<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css选择器</title>
  <!-- 外联 -->
  <link rel="stylesheet" href="./style.css">

  <style>
    /* 
    css语法：
    #div3:选择器{
      语句
      属性1：值；
      属性2：值；
    }
    
    */
    /* id选择器 */
    #div3 {
      color: blue;
    }
  </style>
</head>

<body>
  <!-- 
    html:决定页面中的内容
    css: 决定内容的样式
    语法特性：
      属性1：值；
      属性2：值；
  -->
  <!-- 内联: 耦合性太强，复用性太差，优先级太高了 ==》   尽可能不用内联的方式写css -->
  <div style="color: red;font-size: 30px;">div1</div>
  <div style="color: red;font-size: 30px;">div2</div>

  <!-- 内部引用 -->
  <div id="div3">div3</div>

  <div id="div4">div4</div>


</body>

</html>